<template>
  <div class="container">
    <header>
      <div class="photo">
        <img src="https://m.mi.com/static/img/avatar.76a75b8f17.png" alt="" />
      </div>
      <div class="login">
        <span>登录 /</span>
        <span>注册</span>
      </div>
    </header>
    <main>
      <div class="main-t">
        <p>我的订单</p>
        <span>全部订单 &gt;</span>
      </div>

      <ul class="main-pay">
        <li>
          <img
            src=""
            alt=""
          />
          <p>待支付</p>
        </li>
        <li>
          <img
            src=""
            alt=""
          />
          <p>待收货</p>
        </li>
        <li>
          <img src="https://m.mi.com/static/img/nav-4.d68723895f.png" alt="" />
          <p>退换修</p>
        </li>
      </ul>

      <div class="line"></div>

      <div class="main-list">
        <div class="main-list-one">
          <span class="iconfont">&#xe60e;</span>
          <div class="main-list-one-top">
            <p>会员中心</p>
            <span class="iconfont">&#xe633;</span>
          </div>
        </div>
        <div class="main-list-two">
          <span class="iconfont">&#xe7a3;</span>
          <div class="main-list-two-top">
            <p>我的优惠</p>
            <span class="iconfont">&#xe633;</span>
          </div>
        </div>
      </div>
      <div class="line"></div>

      <div class="main-list">
        <div class="main-list-one">
          <span class="iconfont">&#xe63c;</span>
          <div class="main-list-one-top">
            <p>会员中心</p>
            <span class="iconfont">&#xe633;</span>
          </div>
        </div>
        <div class="main-list-two">
          <span class="iconfont">&#xe6bd;</span>
          <div class="main-list-two-top">
            <p>我的优惠</p>
            <span class="iconfont">&#xe633;</span>
          </div>
        </div>
      </div>
      <div class="line"></div>

      <div class="main-list">
        <div class="main-list-one">
          <span class="iconfont" style="color:yellow">&#xe604;</span>
          <div class="main-list-one-top">
            <p>会员中心</p>
            <span class="iconfont">&#xe633;</span>
          </div>
        </div>
        <div class="main-list-two">
          <span class="iconfont" style="color:yellow">&#xe691;</span>
          <div class="main-list-two-top">
            <p>我的优惠</p>
            <span class="iconfont">&#xe633;</span>
          </div>
        </div>
      </div>
      <div class="line"></div>

      <div class="main-list" style="heigth:0.54rem">
        <div class="main-list-two">
          <span class="iconfont" style="color:gray">&#xe60f;</span>
          <div class="main-list-two-top">
            <p>会员中心</p>
            <span class="iconfont">&#xe633;</span>
          </div>
        </div>
      </div>
    </main>
    <footer>
      <Footerbar />
    </footer>
  </div>
</template>

<script>
import Footerbar from "../../components/Footerbar/Footerbar.vue";
export default {
  name: "Wode",
  components: {
    Footerbar,
  },
};
</script>

<style scoped>
.main-list {
  font-size: 0.145rem;
}
.main-list-one span {
  width: 0.54rem;
  height: 0.54rem;
  font-size: 0.24rem;
  margin: 0 0.2rem;
  color: #f37d0f;
}
.main-list-one-top {
  display: inline-block;
  width: 82%;
  height: 0.54rem;
  line-height: 0.54rem;
  border-bottom: 1px solid rgb(180, 179, 179);
  position: relative;
}

.main-list-one-top p {
  display: inline-block;
}
.main-list-one-top span {
  width: 0.1rem;
  font-size: 0.2rem;
  color: rgb(180, 179, 179);
  position: absolute;
  right: 0;
}
.main-list-two span {
  width: 0.54rem;
  height: 0.54rem;
  font-size: 0.24rem;
  margin: 0 0.2rem;
  color: #0ea8e6;
}
.main-list-two-top {
  display: inline-block;
  width: 82%;
  height: 0.54rem;
  line-height: 0.54rem;
  position: relative;
}

.main-list-two-top p {
  display: inline-block;
}
.main-list-two-top span {
  width: 0.1rem;
  font-size: 0.2rem;
  color: rgb(180, 179, 179);
  position: absolute;
  right: 0;
}
.line {
  height: 0.11rem;
  background-color: #f5f5f5;
}
.main-pay {
  height: 0.89rem;
  display: flex;
  justify-content: space-around;
  text-align: center;
  align-items: center;
}
.main-pay img {
  width: 0.25rem;
  height: 0.25rem;
  display: inline-block;
}
.main-pay p {
  font-size: 0.12rem;
}
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
main {
  flex: 1;
  overflow-y: auto;
}
footer {
  height: 0.52rem;
}
header {
  background-color: #f37d0f;
  position: relative;
}
.photo {
  height: 0.84rem;
  padding: 0.17rem 0.2rem;
  display: inline-block;
}
.photo img {
  width: 0.49rem;
  height: 0.49rem;
}
.login {
  font-size: 0.13rem;
  color: white;
  position: absolute;
  top: 0.32rem;
  left: 0.9rem;
}
.main-t {
  height: 0.42rem;
  padding: 0 0.2rem;
  line-height: 0.42rem;
  border-bottom: 1px solid gray;
}

.main-t p {
  display: inline-block;
  font-size: 0.145rem;
}
.main-t span {
  float: right;
  font-size: 0.125rem;
}
</style>